// namespace: "Home" 
<template>
  <div class="home-container">
    <Header :userInfo="userInfo" />
    <h2>Home</h2>
  </div>
</template>
<script lang="ts">
import Header from "../components/Header.vue";
import {
  defineComponent,
  ref,
  getCurrentInstance,
  onMounted,
  onBeforeMount,
  reactive
} from "vue";

interface UserInfo {
  name: string;
  age: number;
  sex: string;
  avatar: string;
}

export default defineComponent({
  name: "Home",
  components: {
    Header
  },
  setup() {
    const userInfo = ref({});

    // @ts-ignore
    const { ctx } = getCurrentInstance();
    onBeforeMount(() => {
      ctx
        .$axios({
          method: "get",
          url: "/serverApi/profile",
          params: {
            email: "bonnie@aliyun.com"
          }
        })
        .then((result: any) => {
          const { name, age, sex, avatar } = result.data;
          userInfo.value = result.data;
          console.log("info userInfo", userInfo.value);
        })
        .catch((err: Error) => {
          console.log("Error info", err);
        });
    });

    return { userInfo };
  }
});
</script>
<style lang="scss" scoped>
.home-container {
  width: 100%;
  height: 100%;
}
</style>